iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Mobile Development

android studio 30天初學筆記系列 第 16

Android Studio初學筆記-Day16-RecyclerView

  • 分享至 

  • xImage
  •  

RecyclerView

RecyclerView對我來說可以說是進階的Listview,不過它的功能比Listview更強大、更有彈性,程式碼也相對複雜不少,我在學習RecycleView的路上撞了不少牆,但現在我要用我的理解來跟你們介紹一下,這個看似複雜不過很實用的進階元件喔。

  • RecyclerView的設計,在佈局中先插入RecycleView的元件
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>
  • 在res/layout中創建一個Recyclerview的資料顯示樣式
    https://ithelp.ithome.com.tw/upload/images/20210908/201391360Oqu182Rms.png
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:orientation="horizontal">
    <TextView
        android:id="@+id/fileTitle"
        android:text="TextView"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_marginLeft="5dp"
        android:gravity="center_vertical|left" ></TextView>
</LinearLayout>
  • 定義Adapter,在專案資料夾右鍵 -> New -> Java Class,創建一個Class。我在範例中命名為MyAdapter
    https://ithelp.ithome.com.tw/upload/images/20210908/20139136HJCLEAE6sP.png
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    ArrayList<String> ItemList;

    //帶入ArrayList作為資料
    public MyAdapter(ArrayList<String> itemList) {
        this.ItemList = itemList;
    }

    @Override
    //創建一個新的viewholder
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {      
    //負責找尋res/layout 下的佈局檔,功能類似findViewById()。
        View view = LayoutInflater.from(parent.getContext())                    
                    .inflate(R.layout.list_content, parent, false);    //載入layout
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {   
        //將正確的viewholder連接到正確的positon
        holder.fileTitle.setText(ItemList.get(position));            
        //滑動畫面時,將資料位置綁至新的欄位,用新數據將之取代(RecyclerView特色)
    }

    //RecyclerView長度
    @Override
    public int getItemCount() {
        return ItemList.size();
    }              //回傳titlelist總共有幾筆資料

    class ViewHolder extends RecyclerView.ViewHolder {           //綁定recycle的套件
        public TextView fileTitle;
        public ViewHolder(View holder) {
            super(holder);
            //綁定元件ID
            fileTitle = (TextView) holder.findViewById(R.id.fileTitle);
        }
    }
}
  • 最後就可以撰寫MainActivity設定要顯示的資料和連接recyclerview的部分
public class MainActivity extends AppCompatActivity {
    MyAdapter adapter;
    RecyclerView recyclerView;
    ArrayList<String> titleList = new ArrayList();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        recyclerView = findViewById(R.id.recyclerView);

        //給titleList資料
        for(int i = 0;i<20;i++){
            titleList.add("項目"+i);
        }

        recyclerView.setLayoutManager(new LinearLayoutManager(this));     //垂直向下排列
        recyclerView.addItemDecoration(new DividerItemDecoration(this,    //分隔線
                DividerItemDecoration.VERTICAL));
        //將串列titlelist傳入MyAdapter,最後由recyclerView取用
        adapter = new MyAdapter(titleList);                                       
        recyclerView.setAdapter(adapter);
    }
}

其中特別要講的是
recyclerView.setLayoutManager(new LinearLayoutManager(this));

  • 是負責設定recyclerView的排列方式,在這邊設定的是垂直往下排,還有許多樣式可以查詢試看看。
    recyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL));
  • 這裡是可以設定分隔線的地方,也可以透過配合其他元件來改變分隔線的樣式,這裡設了一個最基本的橫線將資料區隔開來。

成果

https://ithelp.ithome.com.tw/upload/images/20210908/201391369Pcig2MTnC.png
今天RecyclerView就講到這邊,謝謝大家~/images/emoticon/emoticon41.gif


上一篇
Android Studio初學筆記-Day15-ListView
下一篇
Android Studio初學筆記-Day17-ItemTouchHelper
系列文
android studio 30天初學筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言